<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <p></p> -->
    <form action="index.html" name="form">
        <div>用户名:<input type="text" name="uname" id=""></div>
        <div>密码:<input type="password" name="pasd" id=""></div>
        <input type="checkbox" name="rem" id="">记住我
        <button>登录</button>
    </form>
    <script>
        // 1. 有一个登录页面， 需要输入用户名， 密码数据。 点击提交按钮后。 将输入的内容提交到名字为 'index.html'
        // 的页面。 在这个页面里面， 显示 "欢迎XXX"，
        // XXX为前一个页面带过来的用户名。 使用Location 对象来实现。
        // 2. 优化第一页面的登录页面， 增加一个“ 记住我” 的选项。
        //     当勾选了这个选项后， 并登录跳转页面后。 关闭浏览器， 再次打开这个页面的时候， 仍旧会记住我之前填写的用户名信息。 -
        //     如果将取消勾选后， 并登录跳转页面后。 关闭浏览器， 再次打开这个页面， 输入框没有内容。
        let form = document.forms.form;
        //记住我
        let rem = form['rem'];
        //用户名
        let uanme = form['uname'];
        //密码
        let pasd = form['pasd'];
        //按钮
        let btn = document.querySelector('button');
        form.addEventListener('input', () => {
                function getFrom(username, password, check) {
                    window.localStorage.setItem('uname', username)
                    window.localStorage.setItem('pasd', password)
                    window.localStorage.setItem('key', check)
                    console.log(check);
                }
                getFrom(uanme.value, pasd.value, rem.checked)
            })
            // console.log(localStorage.getItem('key'));
        console.log(localStorage.getItem('key') == true);
        if (localStorage.getItem('key') != 'false') {
            rem.checked = localStorage.getItem('key')
            uanme.value = localStorage.getItem('uname');
            pasd.value = localStorage.getItem('pasd');

        }
    </script>
</body>

</html>